<template>
    <el-container class="wrapper">
        <!-- 头部区域 -->
        <el-header>
            <img src="../../assets/logo.png" alt="" />
            <h2>后台管理系统</h2>
            <el-button class="logout" type="info" @click="logout"
                >退出</el-button
            >
        </el-header>

        <!-- 主题区域 -->
        <el-container>
            <!-- 侧边栏 -->
            <el-aside :width="toggleBackground">
                <div class="toggle" @click="toggleStyle">|||</div>
                <el-menu
                    background-color="#343c4b"
                    text-color="#fff"
                    active-text-color="#409eff"
                    default-active="2"      
                    unique-opened
                    :collapse='toggleValue'
                    :collapse-transition='false'
                    router
                >
                    <!-- 一级菜单 -->
                    <el-submenu  
                        v-for="value in menusList"
                        :key="value.id" 
                        :index="value.id + ''">
                        <template slot="title">
                            <i :class="iconList[value.id]"></i>
                            <span>{{ value.authName }}</span>
                        </template>
                        <!-- 二级菜单 -->
                        <el-menu-item-group
                            v-for="item in value.children"
                            :key="item.id"
                        >
                            <el-menu-item
                                class="el-icon-menu"
                                :index="item.path + ''"
                                >{{ item.authName }}</el-menu-item
                            >
                        </el-menu-item-group>
                    </el-submenu>
                </el-menu>
            </el-aside>

            <!-- 内容区域 -->
            <el-main>
                <!-- 路由占位符 -->
                <router-view></router-view>
            </el-main>
        </el-container>
    </el-container>
</template>

<script>
export default {
    name: "Home",
    data() {
        return {
            menusList: null,
            iconList: {
                125: "el-icon-user-solid",
                103: "el-icon-lock",
                101: "el-icon-s-goods",
                102: "el-icon-s-order",
                145: "el-icon-s-data",
            },
            
            toggleValue: false,
            toggleBackground: '200px'
        };
    },
    created() {
        this.$http.interceptors.request.use(
            (config) => {
                config.headers.Authorization = sessionStorage.getItem("token");
                return config;
            },
            (error) => {
                console.log("请求拦截器设置失败");
                return Promise.reject(error);
            }
        );
        this.getments();
    },
    methods: {
        // 退出登录方法
        logout() {
            sessionStorage.removeItem("token");
            this.$router.push("/login");
        },
        // 跳转到用户界面
        users() {
            this.$router.push({
                name: "users",
            });
        },
        orders() {
            this.$router.push({
                name: "orders",
            });
        },
        // 获取菜单列表
        getments() {
            this.$http.get("/menus").then((res) => {
                this.menusList = res.data.data;
            });
        },
        // 切换样式
        toggleStyle() {
            this.toggleValue = !this.toggleValue;
            if(this.toggleValue) {
                this.toggleBackground = '65px'
            }else {
                this.toggleBackground = '200px'
            }
            
        }
    },
};
</script>

<style lang='less' scoped>
.el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 200px;
    min-height: 400px;
}
.wrapper {
    width: 100%;
    height: 100%;
    .el-header {
        padding: 0 20px;
        height: 60px;
        background: #363d40;
        box-sizing: border-box;
        line-height: 60px;
        position: relative;
        img {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            width: 40px;
            height: 40px;
            border-radius: 50px;
            float: left;
        }
        h2 {
            color: white;
            text-indent: 2em;
            letter-spacing: 3px;
        }
        .logout {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            right: 20px;
        }
    }

    .el-container {
        .el-aside {
            background: #343c4b;
            height: 100%;
            overflow: hidden;
            .toggle{
                color: white;
                text-align: center;
                width: 100%;
                height: 35px;
                line-height: 35px;
                background-color: rgb(75, 85, 102);
                cursor: pointer;
                font-size: 12px;
                user-select: none;
            }
            .el-menu {
                width: 100%;
                .el-submenu i {
                    margin-right: 8px;
                    font-size: 20px;
                }
                .el-menu-item::before {
                    margin-right: 5px;
                }
                // .el-menu-item{
                //     color: red;
                // }
            }
        }
        .el-main {
            height: 100%;
            padding: 0;
            background: rgb(221, 221, 221);
            overflow: auto;
            box-sizing: border-box;
        }
    }
}
</style>